import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:gourmet/route/index.dart';
import 'package:gourmet/ui/limited_wrap.dart';
import 'package:gourmet/utils/colors.dart';
import 'package:gourmet/utils/radian.dart';
import 'package:gourmet/utils/styles.dart';
import 'package:gourmet/utils/tools.dart';

class SearchStoreController extends GetxController {
  final MenuController menuController = MenuController();

  RxInt searchIndex = 0.obs;

  List<String> searchTypes = ['店铺', '商品'];

  List<String> tags = [
    '饺子',
    '咸骨粥饺子王',
    '隆江猪脚饭',
    '烤鱼',
    '猪杂粉汤',
    '周黑鸭',
    '酸辣粉',
    '麦当劳'
  ];

  RxList<String> history = RxList([
    '饺子',
    '咸骨粥饺子王',
    '隆江猪脚饭',
    '烤鱼',
    '猪杂粉汤',
    '周黑鸭',
    '酸辣粉',
    '麦当劳',
    '甜品',
    '烧鸭饭'
  ]);

  void handleSecondaryTapDown(TapDownDetails details) {
    menuController.open(
        position: details.localPosition + const Offset(-10, 15));
  }

  void handleTapDown(TapDownDetails details) {
    if (menuController.isOpen) {
      menuController.close();
      return;
    }
    menuController.open(
        position: details.localPosition + const Offset(-10, 15));
  }
}

class SearchStorePage extends GetView<SearchStoreController> {
  const SearchStorePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        systemOverlayStyle: SystemUiOverlayStyle.dark,
        leading: IconButton(
            onPressed: Get.back,
            icon: Icon(
              Icons.arrow_back_ios_new,
              color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
              size: 20,
            )),
        title: Center(
          child: Container(
            constraints: const BoxConstraints.expand(width: 250, height: 35),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(17.5),
              border: Border.all(color: ColorsUtils.rgba(255, 100, 77, 1)),
            ),
            child: Row(
              children: [
                PopupMenuButton<int>(
                  itemBuilder: (BuildContext context) {
                    return <PopupMenuEntry<int>>[
                      PopupMenuItem(
                        value: 0,
                        padding: EdgeInsets.zero,
                        height: 35,
                        child: Container(
                          constraints: const BoxConstraints.expand(
                              width: 60, height: 35),
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: ColorsUtils.rgba(
                                  51, 51, 51, 0.898039215686275),
                              borderRadius: BorderRadius.only(
                                  topLeft: Radius.circular(5.r),
                                  topRight: Radius.circular(5.r))),
                          child: Text(
                            '店铺',
                            style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize13),
                          ),
                        ),
                        onTap: () {
                          controller.searchIndex.value = 0;
                        },
                      ),
                      PopupMenuItem(
                        value: 1,
                        padding: EdgeInsets.zero,
                        height: 35,
                        child: Container(
                          constraints: const BoxConstraints.expand(
                              width: 60, height: 35),
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: ColorsUtils.rgba(
                                  51, 51, 51, 0.898039215686275),
                              borderRadius: BorderRadius.only(
                                  bottomLeft: Radius.circular(5.r),
                                  bottomRight: Radius.circular(5.r))),
                          child: Text(
                            '商品',
                            style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize13),
                          ),
                        ),
                        onTap: () {
                          controller.searchIndex.value = 1;
                        },
                      )
                    ];
                  },
                  elevation: 0,
                  padding: EdgeInsets.zero,
                  splashRadius: 0,
                  position: PopupMenuPosition.under,
                  color: Colors.transparent,
                  surfaceTintColor: Colors.transparent,
                  shadowColor: Colors.transparent,
                  constraints: const BoxConstraints(maxWidth: 60),
                  child: Container(
                    constraints:
                        const BoxConstraints.expand(width: 60, height: 35),
                    alignment: Alignment.center,
                    child: Obx(() => Text.rich(TextSpan(children: [
                          TextSpan(
                            text: controller
                                .searchTypes[controller.searchIndex.value],
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color3333,
                                fontSize: StylesUtils.fontSize13),
                          ),
                          const WidgetSpan(
                              child: Icon(
                                Icons.arrow_drop_down,
                                size: 15,
                                color: Colors.black,
                              ),
                              alignment: PlaceholderAlignment.middle)
                        ]))),
                  ),
                ),
                Expanded(
                  child: TextField(
                    cursorHeight: 20,
                    cursorWidth: 3,
                    cursorRadius: const Radius.circular(2),
                    cursorColor: Colors.blue,
                    decoration: InputDecoration(
                        fillColor: Colors.transparent,
                        hintText: '华莱士',
                        hintStyle: StylesUtils.customTextStyle(
                            color: ColorsUtils.color9999),
                        isCollapsed: true,
                        filled: true,
                        isDense: true,
                        contentPadding:
                            const EdgeInsets.symmetric(vertical: 10),
                        enabledBorder: InputBorder.none,
                        focusedBorder: InputBorder.none,
                        border: InputBorder.none,
                        constraints: const BoxConstraints(maxHeight: 35)),
                  ),
                ),
              ],
            ),
          ),
        ),
        actions: [
          InkWell(
            onTap: () {
              Get.toNamed(Routes.searchStoreResult);
            },
            child: Container(
              margin: const EdgeInsets.only(right: 15, left: 15),
              alignment: Alignment.center,
              constraints: const BoxConstraints.expand(
                width: 65,
                height: 35,
              ),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(17.5),
                  border: Border.all(
                      color: ColorsUtils.parseColorFromHexString(
                          ColorsUtils.colorFf64)),
                  gradient: LinearGradient(
                      colors: [
                        ColorsUtils.rgba(255, 153, 0, 1),
                        ColorsUtils.rgba(255, 153, 0, 1),
                        ColorsUtils.rgba(255, 77, 1, 1),
                        ColorsUtils.rgba(255, 77, 1, 1)
                      ],
                      stops: const [
                        0,
                        0,
                        1.0,
                        1.0
                      ],
                      transform:
                          GradientRotation(RadianUtils.angleToRadian(90)),
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight)),
              child: Text(
                '搜索',
                style: StylesUtils.customTextStyle(),
              ),
            ),
          )
        ],
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 15),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '搜索推荐',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color0000,
                        fontSize: StylesUtils.fontSize15,
                        fontWeight: FontWeight.w700),
                  ),
                  GestureDetector(
                    onTap: () {},
                    child: RichText(
                      text: TextSpan(children: [
                        TextSpan(
                            text: '换一批 ',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999,
                                fontSize: StylesUtils.fontSize13)),
                        WidgetSpan(
                            child: Icon(
                              CupertinoIcons.arrow_clockwise,
                              size: 14,
                              color: ColorsUtils.parseColorFromHexString(
                                  ColorsUtils.color9999),
                            ),
                            alignment: PlaceholderAlignment.middle)
                      ]),
                    ),
                  )
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 15, left: 5, right: 5),
              child: Align(
                alignment: Alignment.centerLeft,
                child: LimitedWrap(
                  maxLine: -1,
                  spacing: 10,
                  runSpacing: 15,
                  children: controller.tags
                      .map(
                        (value) => Builder(builder: (c) {
                          final style = StylesUtils.customTextStyle(
                              color: ColorsUtils.color0000,
                              fontSize: StylesUtils.fontSize13);
                          double width = ToolsUtils.calculateTextWidth(
                              value: value, style: style);
                          return Container(
                            alignment: Alignment.center,
                            height: 30,
                            width: width + 20,
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(15.r),
                                color: ColorsUtils.parseColorFromHexString(
                                    ColorsUtils.colorF5f5)),
                            child: Text(
                              value,
                              style: style,
                            ),
                          );
                        }),
                      )
                      .toList(),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 15),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '历史搜索',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color0000,
                        fontSize: StylesUtils.fontSize15,
                        fontWeight: FontWeight.w700),
                  ),
                  IconButton(
                      onPressed: () {
                        controller.history.clear();
                      },
                      icon: Icon(
                        Icons.delete_outlined,
                        size: 20,
                        color: ColorsUtils.parseColorFromHexString(
                            ColorsUtils.color9999),
                      ))
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 15, left: 5, right: 5),
              child: Align(
                alignment: Alignment.centerLeft,
                child: Obx(() => LimitedWrap(
                      maxLine: -1,
                      spacing: 10,
                      runSpacing: 15,
                      children: controller.history
                          .map(
                            (value) => Builder(builder: (c) {
                              final style = StylesUtils.customTextStyle(
                                  color: ColorsUtils.color0000,
                                  fontSize: StylesUtils.fontSize13);
                              double width = ToolsUtils.calculateTextWidth(
                                  value: value, style: style);
                              return Container(
                                alignment: Alignment.center,
                                height: 30,
                                width: width + 20,
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(15.r),
                                    color: ColorsUtils.parseColorFromHexString(
                                        ColorsUtils.colorF5f5)),
                                child: Text(
                                  value,
                                  style: style,
                                ),
                              );
                            }),
                          )
                          .toList(),
                    )),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget get gesture {
    return GestureDetector(
        onTapDown: controller.handleTapDown,
        onSecondaryTapDown: controller.handleSecondaryTapDown,
        child: MenuAnchor(
          controller: controller.menuController,
          alignmentOffset: Offset.zero,
          menuChildren: [
            MenuItemButton(
              style: const ButtonStyle(
                  minimumSize: WidgetStatePropertyAll(Size(60, 35)),
                  fixedSize: WidgetStatePropertyAll(Size(60, 35)),
                  padding: WidgetStatePropertyAll(EdgeInsets.zero),
                  elevation: WidgetStatePropertyAll(0),
                  backgroundColor: WidgetStatePropertyAll(Colors.transparent)),
              child: Container(
                constraints: const BoxConstraints.expand(width: 60, height: 35),
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    color: ColorsUtils.rgba(51, 51, 51, 0.898039215686275),
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(5.r),
                        topRight: Radius.circular(5.r))),
                child: Text(
                  '店铺',
                  style: StylesUtils.customTextStyle(
                      fontSize: StylesUtils.fontSize13),
                ),
              ),
              onPressed: () {
                controller.searchIndex.value = 0;
              },
            ),
            MenuItemButton(
              style: const ButtonStyle(
                  minimumSize: WidgetStatePropertyAll(Size(60, 35)),
                  fixedSize: WidgetStatePropertyAll(Size(60, 35)),
                  padding: WidgetStatePropertyAll(EdgeInsets.zero),
                  elevation: WidgetStatePropertyAll(0),
                  backgroundColor: WidgetStatePropertyAll(Colors.transparent)),
              child: Container(
                constraints: const BoxConstraints.expand(width: 60, height: 35),
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    color: ColorsUtils.rgba(51, 51, 51, 0.898039215686275),
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(5.r),
                        bottomRight: Radius.circular(5.r))),
                child: Text(
                  '商品',
                  style: StylesUtils.customTextStyle(
                      fontSize: StylesUtils.fontSize13),
                ),
              ),
              onPressed: () {
                controller.searchIndex.value = 1;
              },
            ),
          ],
          style: const MenuStyle(
            backgroundColor: WidgetStatePropertyAll(Colors.blue),
            padding: WidgetStatePropertyAll(EdgeInsets.zero),
            elevation: WidgetStatePropertyAll(0),
          ),
          child: Container(
            constraints: const BoxConstraints.expand(width: 60, height: 35),
            alignment: Alignment.center,
            child: Obx(() => Text.rich(TextSpan(children: [
                  TextSpan(
                    text: controller.searchTypes[controller.searchIndex.value],
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color3333,
                        fontSize: StylesUtils.fontSize13),
                  ),
                  const WidgetSpan(
                      child: Icon(
                        Icons.arrow_drop_down,
                        size: 15,
                        color: Colors.black,
                      ),
                      alignment: PlaceholderAlignment.middle)
                ]))),
          ),
        ));
  }
}
